<template>
    <view class="dp-cover">
        <button @tap="handleClick" :data-url="params.hrefurl"
                :open-type="params.hrefurl=='contact::'?'contact':(params.hrefurl=='share::'?'share':'')"
                class="dp-cover-cover" :style="{
		zIndex:10,
		top:params.top+'vh',
		left:params.left+'vw',
		color:params.color,
		backgroundColor:params.bgcolor,
		width:(params.width*2.2)+'rpx',
		height:(params.height*2.2)+'rpx',
		margin:(params.margin_y*2.2)+'rpx '+(params.margin_x*2.2)+'rpx',
		padding:(params.padding_y*2.2)+'rpx '+(params.padding_x*2.2)+'rpx',
		fontSize:(params.fontsize*2.2)+'rpx',
		border:(params.border*2.2)+'rpx solid '+params.bordercolor,
		borderRadius:(params.radius*2.2)+'rpx'
	}" :show-message-card="true">
            <text v-if="params.style==1" style="padding:0 4rpx">{{ params.text }}</text>
            <image v-if="params.style==2" :src="params.pic"
                   :style="{width:(params.picwidth*2.2)+'rpx',height:(params.picheight*2.2)+'rpx'}"/>
        </button>
        
        <view>
            <uni-popup ref="popup" type="bottom" :showBottomMargins="false">
                <view class="popup_body_center">
                    <view class="popup_title">商品橱窗
                        <view class="close_btn">
                            <u-icon @click="cloesClick" name="close" color="#999" size="18"></u-icon>
                        </view>
                    </view>
                    <scroll-view scroll-y="true" class="popup_box">
                        <view>
                            <view class="popup_list" v-if="heatShow">
                                <view class="title">
                                    <text class="shop-title">店铺热榜</text>
                                    <text class="view-more" @tap="goto" data-url="/pages/index/main?id=5">查看更多>
                                    </text>
                                </view>
                                <view class="content">
                                    <view v-for="value in heatList" :key="value.id" @click="toDetail(value.proid)"
                                          class="product-item">
                                        <image :src="value.pic"></image>
                                        <text>￥{{ value.sell_price }}</text>
                                    </view>
                                </view>
                            </view>
                            <view class="popup_list" v-if="recommendShow">
                                <view class="title">
                                    <text class="shop-title">为你推荐</text>
                                    <text class="view-more" @tap="goto" data-url="/pages/index/main?id=6">查看更多>
                                    </text>
                                </view>
                                <view class="content">
                                    <view v-for="value in recommendList" :key="value.id" @click="toDetail(value.proid)"
                                          class="product-item">
                                        <image :src="value.pic"></image>
                                        <text>￥{{ value.sell_price }}</text>
                                    </view>
                                </view>
                            </view>
                            <view class="popup_list" v-if="historyShow">
                                <view class="title">
                                    <text class="shop-title">历史足迹</text>
                                    <text class="view-more" @tap="goto" data-url="/pagesExt/my/history">查看更多></text>
                                </view>
                                <view class="content">
                                    <view v-for="value in historyList" :key="value.id" @click="toDetail(value.proid)" class="product-item">
                                        <image :src="value.product.pic"></image>
                                        <text>￥{{ value.product.sell_price }}</text>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </scroll-view>
                </view>
            </uni-popup>
        </view>
        
        <loading v-if="loading"></loading>
    </view>
</template>
<script>
    var app = getApp();
    
    export default {
        props: {
            params: {},
        },
        data() {
            return {
                loading: false,
                
                heatShow: false,
                heatList: [],
                
                recommendShow: false,
                recommendList: [],
                
                historyShow: false,
                historyList: [],
            }
        },
        methods: {
            /**获取数据*/
            async getDataList() {
                let that = this;
                that.loading = true;
                let loginCurrent = 0;
                let loadSuc = function () {
                    loginCurrent += 1
                    if (loginCurrent >= 3) {
                        that.loading = false;
                    }
                }
                app.get('ApiIndex/index', {
                    id: 5,
                    latitude: "",
                    longitude: "",
                    area: "",
                    mendian_id: "0",
                    mode: "",
                    deviceid: "undefined"
                }, function (res) {
                    if (
                        Object.keys(res).length >= 1 &&
                        Object.keys(res["pagecontent"]).length >= 2 &&
                        Object.keys(res["pagecontent"][1]["data"]).length >= 1
                    ) {
                        that.heatShow = true;
                        that.heatList = res.pagecontent[1].data
                    }
                    loadSuc()
                });
                app.get('ApiIndex/index', {
                    id: 6,
                    latitude: "",
                    longitude: "",
                    area: "",
                    mendian_id: "0",
                    mode: "",
                    deviceid: "undefined"
                }, function (res) {
                    if (
                        Object.keys(res).length >= 1 &&
                        Object.keys(res["pagecontent"]).length >= 2 &&
                        Object.keys(res["pagecontent"][1]["data"]).length >= 1
                    ) {
                        that.recommendShow = true;
                        that.recommendList = res.pagecontent[1].data
                    }
                    loadSuc()
                });
                app.post('ApiMy/history', {pagenum: 0, mid: 1}, function (res) {
                    var data = res.data;
                    if (data.length == 0) {
                        that.historyShow = false;
                    } else {
                        that.historyList = data;
                        that.historyShow = true;
                    }
                    console.log(data);
                    loadSuc()
                });
            },
            show(a, b) {
                if (typeof a[b] === "undefined") {
                    return false;
                }
                return Object.keys(a[b]).length >= 1
            },
            handleClick() {
                if (this.params.hrefurl === "rPopup") {
                    this.$refs.popup.open('top');
                    this.getDataList()
                } else {
                    getApp().goto(this.params.hrefurl);
                }
            },
            cloesClick() {
                this.$refs.popup.close('top');
            },
            toDetail:function(id){
				var url = '/pages/shop/product?id='+id;//默认链接
				app.goto(url);
			}
        }
    }
</script>
<style lang="scss" scoped>
    .dp-cover {
        height: auto;
        position: relative;
    }
    
    .dp-cover-cover {
        position: fixed;
        z-index: 99999;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden
    }
    
    .popup_body_center {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;
        z-index: 99999;
        background: #f7f8fa;
        border-top-left-radius: 20rpx;
        border-top-right-radius: 20rpx;
        //设置最小高度
        min-height: 1138rpx;
    }
    
    .popup_title {
        width: 100%;
        padding-top: 20rpx;
        text-align: center;
        position: relative;
        
        .close_btn {
            position: absolute;
            right: 20rpx;
            top: 20rpx;
            width: auto;
            height: auto;
        }
    }
    
    .popup_box {
        padding: 30rpx;
        float: left;
        
        .popup_list {
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            flex-direction: column;
            margin-bottom: 10px;
            background: white;
            padding: 10px 20px;
            border-radius: 10px;
            
            .title {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 10px;
                
                .shop-title {
                    font-size: 13px;
                }
                
                .view-more {
                    font-size: 10px;
                    color: #999;
                }
            }
            .popup_list_box {
                display: flex;
                align-items: flex-start;
                justify-content: center;
            }
            .content {
                display: flex;
                justify-content: flex-start;
                width: 100%;
                overflow: hidden;
                
                .product-item {
                    width: calc(33.33% - 20rpx);
                    // margin-bottom: 15px;
                    display: flex;
                    flex-direction: column;
                    flex: 0 0 auto;
                    margin-right: 20rpx;
                    
                    image {
                        width: 100%;
                        height: auto;
                        min-height: 184rpx;
                        object-fit: cover;
                        border-radius: 5px;
                        margin-bottom: 5px;
                    }
                    
                    text {
                        font-size: 12px;
                        color: #c9b079;
                    }
                }
            }
        }
    }


</style>